import React, { useEffect, useState } from 'react';

import { Button, Card, Form, Table } from 'antd';
import { history } from 'umi'

import LabelValue from '@/components/LabelValue';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { useRequest } from '@/hooks';
import { formatResultByFetchDetail } from '@/pages/TurnoverSetting/EntrySetting/util';

import { getEntryAssetsConfigDetail } from '../services';
import styles from './index.less';

const EntryAssetAllocationDetail = ({ location }) => {
    const [professionalSoftData, setProfessionalSoftData] = useState([]);
    const { id } = location.query;
    // 获取详情
    const { data: detailData, loading, run: fetchEntryAssetsConfigDetail } = useRequest(
        value => getEntryAssetsConfigDetail(value),
        {
            manual: true,
            formatResult: formatResultByFetchDetail
        }
    );

    // 通用软件
    const commonSoftwareColumns = [
        {
            title: '名称',
            dataIndex: 'softname',
            key: 'softname',
            width: '30%'
        },
        {
            title: '类型',
            dataIndex: 'softType',
            key: 'softType',
            width: '30%'
        }
    ];

    // 虚拟资产
    const accountColumns = [
        {
            title: '名称',
            dataIndex: 'assetName',
            key: 'assetName',
            width: '30%'
        },
        {
            title: '网址',
            dataIndex: 'assetUrl',
            key: 'assetUrl',
            width: '30%'
        }
    ];

    useEffect(() => {
        // 数据格式化
        setProfessionalSoftData(detailData?.professionalSoftware.map(item => item.softname));
    }, [detailData]);

    useEffect(() => {
        if (id) {
            // 获取详情
            fetchEntryAssetsConfigDetail(id);
        }
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);
    return (
        <PageHeaderWrapper>
            <Card
                title="入职资产配置详情"
                bordered={false}
                loading={loading}
                className={styles.entryCard}
                extra={
                    <Button
                        type="primary"
                        onClick={() => {
                            history.push({
                                pathname: '/office/personnelManagement/onboardAndLeave/setting/assetAllocationEdit',
                                query: { id }
                            });
                        }}
                    >
                        编辑
                    </Button>
                }
            >
                <div className={styles.entryMaterialEditWrapper}>
                    <LabelValue
                        label="配置名称"
                        labelClassName={styles.labelWidth110}
                        valueClassName={styles.darkColor}
                        value={detailData?.settingName}
                    />
                    <LabelValue
                        label="适用行政机构"
                        labelClassName={styles.labelWidth110}
                        valueClassName={styles.darkColor}
                        value={() => (
                            <span>
                                {detailData?.isDefault === 1
                                    ? '全集团'
                                    : detailData?.administrativeScopeNames.join('、')}
                            </span>
                        )}
                    />
                    <LabelValue
                        label="通用软件列表"
                        labelClassName={styles.labelWidth110}
                        valueClassName={styles.darkColor}
                        value={() => (
                            <Table
                                columns={commonSoftwareColumns}
                                dataSource={detailData?.commonSoftware}
                                pagination={false}
                                style={{ width: 720 }}
                            />
                        )}
                    />
                    <LabelValue
                        label="专业软件列表"
                        labelClassName={styles.labelWidth110}
                        valueClassName={styles.darkColor}
                        value={() => <span>{professionalSoftData?.join('、')}</span>}
                    />
                    <LabelValue
                        label="系统帐号列表"
                        labelClassName={styles.labelWidth110}
                        valueClassName={styles.darkColor}
                        value={() => (
                            <Table
                                columns={accountColumns}
                                dataSource={detailData?.virtualSystem}
                                pagination={false}
                                style={{ width: 720 }}
                            />
                        )}
                    />
                </div>
            </Card>
        </PageHeaderWrapper>
    );
};

export default Form.create()(EntryAssetAllocationDetail);
